<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>发现</title>
<link rel="stylesheet" href="../../../../../layui/css/layui.css">
<style>
    /* 这段样式只是用于演示 */
  #component-anim .layui-card-body{padding: 15px;}
  #component-anim .component-anim-demo{margin-bottom: 50px; font-size: 0;}
  #component-anim .component-anim-demo li{display: inline-block; vertical-align: middle; width: 127px; line-height: 25px; padding: 20px 0; margin-right: -1px; margin-bottom: -1px; border: 1px solid #e2e2e2; font-size: 14px; text-align: center; color: #666; transition: all .3s; -webkit-transition: all .3s;}
  #component-anim .component-anim-demo li .layui-icon{display: inline-block; font-size: 36px;}

  #component-anim .component-anim-demo li .fontclass{display: none;}
  #component-anim .component-anim-demo li .name{color: #c2c2c2;}
  #component-anim .component-anim-demo li:hover{background-color: #f2f2f2; color: #000;}

  #component-anim .component-anim-demo li{width: 222px;}
  #component-anim .component-anim-demo .layui-anim{width: 150px; height: 150px; line-height: 150px; margin: 0 auto 10px; text-align: center; background-color: #009688; cursor: pointer; color: #fff; border-radius: 50%;}
</style>
</head>
<body>
<div id="component-anim" class="layui-fluid">
  <div class="layui-row">
        <div class="layui-col-md12">
          <div class="layui-tab layui-tab-card">
            <ul class="layui-tab-title">
              <li class="layui-this">好友</li>
              <li>群组</li>
            </ul>
            <div class="layui-tab-content" style="height: 100%">
              <!-- 好友列表 -->
              <div class="layui-tab-item layui-show">
                <div class="layui-row">
                  <div class="layui-inline">
                    <input class="layui-input"
                           name="id"
                           id="friend"
                           autocomplete="off"
                           placeholder="请输入姓名">
                  </div>
                  <button class="layui-btn operate-search" data-type="searchFriend">查找</button>
                </div>
                <div class="layui-row friend-content component-anim-demo">
                  <ul class="site-doc-icon site-doc-anim" id="friendContent">
                  </ul>
                </div>
              </div>
              <div class="layui-tab-item">
                <div class="layui-row">
                  <div class="layui-inline">
                    <input class="layui-input"
                           name="id"
                           autocomplete="off"
                           placeholder="请输入群组" id="group" >
                  </div>
                  <button class="layui-btn operate-search" data-type="searchGroup">查找</button>
                </div>
                <div class="layui-row group-content component-anim-demo" id="groupContent">

                </div>
              </div>
            </div>
          </div>
        </div>
  </div>
</div>

<script src="../../../../../layui/layui.js"></script>
<script>
layui.use(['layim', 'laypage','element'], function(){
  var pathName = location.pathname ;
  var webName = pathName == ''?'' : pathName.substring(0, pathName.indexOf('/'));
  var basePath = location.origin+'/'+webName ;

  var layim = layui.layim
  ,layer = layui.layer
  ,laytpl = layui.laytpl
  ,$ = layui.jquery
  ,laypage = layui.laypage
  ,element = layui.element
  ,router = layui.router();
  element.render();
  var $ = layui.$, active = {
      searchFriend: function(){
      var data ={
        access_token:layui.data('layuiAdmin').access_token,
        searchType:'friend',
        search:$('#friend').val()
      };
      var url = basePath+'system/im/api/search.do';
      $.ajax({
        type:"GET",
        url:url,
        data: data ,
        dataType:"json",
        success:function(res){
          console.log(JSON.stringify(res));
          //alert("成功");
          var dataArr = res.data ;
          var friendHtm = "";
          if(dataArr.length > 0){
            $('#friendContent').html("");
            for(var i=0 ;i < dataArr.length ; i++ ){
              var imUser = dataArr[i];
              friendHtm = friendHtm
                      + '<li>'
                      +'<div class="layui-anim layui-anim-up" data-anim="layui-anim-up">'+imUser.username+'</div>'
                      +'<div class="code"><button class="layui-btn" data-type="add">申请好友</button></div>'
                      +'</li>'
            }
            $('#friendContent').append(friendHtm);
          }
        },
        error:function(jqXHR){
          alert("发生错误"+jqXHR.status);
        }
      })
    },
    searchGroup:function(){
      var data ={
        access_token:layui.data('layuiAdmin').access_token,
        searchType:'group',
        search:$('#group').val()
      };
      var url = basePath+'system/im/api/search.do';
      $.ajax({
        type:"GET",
        url:url,
        data: data ,
        dataType:"json",
        success:function(res){
          var dataArr = res.data ;
          var groupHtm = "";
          if(dataArr.length > 0){
            $('#groupContent').html("");
            for(var i=0 ;i < dataArr.length ; i++ ){
              var imGroup = dataArr[i];
              groupHtm = groupHtm
                      + '<li>'
                      +'<div class="layui-anim layui-anim-up" data-anim="layui-anim-up">'+imGroup.groupname+'</div>'
                      +'<div class="code"><button class="layui-btn" data-type="addqun">申请加群</button></div>'
                      +'</li>'
            }
            $('#groupContent').append(groupHtm);
        }},
        error:function(jqXHR){
          alert("发生错误"+jqXHR.status);
        }
      })
    }};

  $('.operate-search').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });

});
</script>
</body>
</html>
